<template>
  <div>
    <!--个人信息-->
    <div v-if="$route.name == 'userCenter-myInfo'">
      <content-header title="个人信息"></content-header>
      <div class="xui-grid-avg-2 header xui-margin-vertical-sm">
        <div class="left xui-fc xui-padding-sm xui-margin-right-md">
          <div class="avatar xui-fl">
            <img-box :imgSrc="userInfo.avatar || pic" width="128" height="128"></img-box>
            <span class="btn btn-hollow" @click="dialogEditAvatar = true">
              更改头像
            </span>
          </div>
          <div class="user xui-margin-top-sm">
            <div class="name xui-margin-bottom-xs">
              <span class="color-yellow">{{userInfo.userName.trim() || userId}}</span>
              <i v-if="userInfo.sex == 0" class="iconfont icon-nan"></i>
              <i v-if="userInfo.sex == 1" class="iconfont icon-nv"></i>
            </div>
            <div>
              <span class="color-gray">手机号：</span>
              <span style="color: #606060">{{userInfo.mobile || "待编辑"}}</span>
            </div>
            <div>
              <span class="color-gray">{{userInfo.codeType || "未知证件"}}：</span>
              <span style="color: #606060">{{userInfo.code || "待编辑"}}</span>
            </div>
            <div class="xui-margin-top-xs">
              <router-link to="myInfo/edit">修改资料</router-link>
              <router-link to="myInfo/modifyPS">修改密码</router-link>
            </div>
          </div>
        </div>
        <div class="right">
          <ul>
            <li>
              <span class="number">{{userCount.visit}}</span>
              <span class="text">参观次数</span>
            </li>
            <li>
              <span class="number">{{userCount.appointment}}</span>
              <span class="text">预约次数</span>
            </li>
            <li>
              <span class="number">{{userCount.thumbup}}</span>
              <span class="text">点赞次数</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="main xui-margin-top-md">
        <h4 class="xui-padding-vertical-sm xui-padding-left-sm">我的勋章</h4>
        <swiper v-if="medalList.length" :options="swiperOption" class="list" style="padding-left:40px;padding-right:40px;padding-bottom:40px">
          <swiper-slide v-for="(item, index) in medalList" :key="index" style="overflow:hidden">
            <img-box width="100%" height="180" :imgSrc="item.imgUrl"></img-box>
            <div class="xui-text-center xui-margin-top">
              {{item.medalName}}
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <div v-else class="xui-text-center xui-padding-bottom">
          您还没有得到任何勋章，通过
          <a class="color-primary" @click="showBuilding('学习资源正在建设中。')">在线学习</a>可以获得勋章。
          <!-- <router-link class="color-primary " :to="{name:'study-online'}">在线学习</router-link>可以获得勋章。 -->
        </div>
      </div>
      <div class="main xui-margin-top-md">
        <h4 class="xui-padding-vertical-sm xui-padding-left-sm">点赞记录</h4>
        <swiper v-if="thumbupList.length" :options="swiperOption" class="list" style="padding-left:40px;padding-right:40px;padding-bottom:40px">
          <swiper-slide v-for="(item, index) in thumbupList" :key="index" style="overflow:hidden">
            <router-link :to="{ name: 'Collection-overview-detail', params: { id: item.sid }, query:{sid:item.sid}}">
              <img-box width="100%" height="200" :imgSrc="item.picUrl"></img-box>
              <div class="list__info xui-text-center">
                {{item.name}}
              </div>
            </router-link>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <div v-else class="xui-text-center xui-padding-bottom">
          您还没有任何点赞记录，快去
          <router-link class="color-primary" :to="{name:'Collection-overview'}">典藏概况</router-link>，为你喜欢的藏品点赞吧。
        </div>
      </div>
    </div>
    <!-- vue-croppa  -->

    <router-view></router-view>

    <!-- 修改头像对话框 -->
    <el-dialog title="修改头像" :visible.sync="dialogEditAvatar" width="400px" class="xui-text-center">
      <croppa v-model="myCroppa" :width="200" placeholder="选择图片" :placeholder-font-size="16" canvas-color="transparent" :show-remove-button="true"
        remove-button-color="#d3af68" :show-loading="true" :prevent-white-space="true" style="height:200px;"></croppa>
      <div>
        <el-button type="primary" style="width:200px" @click="editAvatar"> 确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import ImgBox from "@/components/widge/img-box";
  import ContentHeader from "@/components/widge/content-header";
  import pic from "@/assets/images/example/avatar.png";
  import ImgCard from "@/components/list/img-card";
  import {
    swiper,
    swiperSlide
  } from "vue-awesome-swiper";
  import {
    getUserInfo,
    updateUserInfo,
    getUserAvadar,
    getCountThumbsupByUser,
    getVistCount,
    getRecordThumbsupByUser,
    getCountAppointActByUser,
    editAvatar
  } from "@/api/login";
  import {
    getUserMedal
  } from "@/api/learning-online";
  import "vue-croppa/dist/vue-croppa.css";

  export default {
    components: {
      ImgCard,
      ContentHeader,
      ImgBox
    },
    data() {
      return {
        myCroppa: {},
        swiperOption: {
          slidesPerView: 3,
          spaceBetween: 30,
          pagination: {
            el: ".swiper-pagination",
            clickable: true
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          }
        },
        pic,
        userCount: {
          visit: 0,
          appointment: 0,
          thumbup: 0
        },
        medalList: [{
          id: 3,
          courseId: 66,
          userId: "ADMIN",
          joinNum: 2,
          questionNum: 2,
          allPoint: 10,
          medalId: 983,
          isFinish: "Y",
          medalName: "金牌",
          imgUrl: "http://localhost:8080/cbeducate/sysfile/download/983.shtml",
          act: "2018-05-07 17:17",
          list: null
        }],
        thumbupList: [],
        dialogEditAvatar: false
      };
    },
    computed: {
      routePath() {
        return this.$route.path;
      },
      userInfo() {
        return this.$store.getters.userInfo;
      },
      userId() {
        return this.$store.getters.userId;
      }
    },
    methods: {
      showBuilding(str) {
        this.$alert(str, "正在建设", {
          confirmButtonText: "确定"
        });
      },
      getThumbupCount() {
        getCountThumbsupByUser().then(res => {
          this.userCount.thumbup = res.data;
        });
      },
      getVisitCount() {
        getVistCount().then(res => {
          this.userCount.visit = res.times;
        });
      },
      getActCount() {
        getCountAppointActByUser(this.userId).then(res => {
          this.userCount.appointment = res.data;
        });
      },
      getRecordThumbsupByUser() {
        getRecordThumbsupByUser().then(res => {
          this.thumbupList = res.data.recordsList;
        });
      },
      getMyMedal() {
        getUserMedal(this.userId).then(res => {
          console.log(res);
          this.medalList = res.data;
        });
      },
      editAvatar() {
        let baseUrl = this.myCroppa.generateDataUrl();
        baseUrl = baseUrl.substring(baseUrl.indexOf(",") + 1);
        editAvatar(baseUrl)
          .then(res => {
            if (res.flag == 1) {
              this.$store.dispatch("GetUserAvatar");
              this.dialogEditAvatar = false;
            }
          })
          .catch(err => {});
      }
    },
    mounted() {
      this.getThumbupCount();
      this.getVisitCount();
      this.getActCount();
      this.getRecordThumbsupByUser();
      this.getMyMedal();
    }
  };

</script>
<style lang="less" scoped>
  .hide {
    position: absolute;
    display: block !important;
    width: 82px;
    opacity: 0;
  }

  .header {
    .left,
    .right {
      width: 450px;
      border: 1px solid #e5e5e5;
    }
    .avatar {
      position: relative;
      .btn {
        width: 100%;
        position: absolute;
        bottom: 0;
        text-align: center;
        color: #fff;
        height: 24px;
        line-height: 24px;
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.35);
        input {
          width: 100%;
        }
      }
    }
    .user {
      padding-left: 148px;
      .name {
        i.icon-nan {
          font-size: 14px;
        }
        .icon-nan {
          color: #42a8f0;
        }
        .icon-nv {
          color: #ee82ab;
        }
      }
      span {
        font-size: 14px;
      }
      a {
        color: #f8886e;
      }
    }
  }

  .right {
    padding: 2.6rem;
    ul {
      li {
        display: inline-block;
        padding: 15px 30px;
        border-right: 1px solid #d6d6d6;
        span {
          display: block;
          text-align: center;
        }
        .number {
          font-size: 22px;
          color: #d7a12e;
        }
        .text {
          font-size: 16px;
          color: #757575;
        }
      }
      li:last-child {
        border-right: 0;
      }
    }
  }

  .main {
    border: 1px solid #e5e5e5;
    h4 {
      background-color: #f7f7f7;
      font-weight: normal;
      font-size: 16px;
    }
    .medalList {
      width: 628px;
      margin: 0 auto;
      li {
        width: 33.3%;
        display: inline-block;
      }
      .img {
        width: 140px;
        height: 140px;
        margin: 0 auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url("../../../assets/images/example/hz.png") no-repeat;
      }
      span {
        display: block;
        text-align: center;
      }
    }
    .list {
      margin: 0 auto;
      li {
        display: inline-block;
        margin-right: 15px;
      }
      li:last-child {
        margin-right: 0;
      }
      a {
        display: block;
        position: relative;
        cursor: pointer;
        border: 1px solid #bfc1c1;
      }
      a:hover .list__info {
        background-color: rgba(42, 42, 43, 0.8);
      }
      .list__info {
        width: 100%;
        height: 48px;
        background-color: rgba(42, 42, 43, 0.5);
        position: absolute;
        bottom: 0;
        color: #fff;
        line-height: 48px;
      }
    }
  }

  .color-yellow {
    color: #bf9c51;
  }

  .croppa-container {
    background-color: rgb(249, 235, 193);
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .croppa-container:hover {
    opacity: 1;
    background-color: #e1c594;
  }

</style>
